import 'package:flutter/material.dart';
import 'package:wallpaper_app/pages/love/love_page.dart';

class LoveImagePage extends StatefulWidget {
  const LoveImagePage({super.key});

  @override
  State<LoveImagePage> createState() => _LoveImagePageState();
}

class _LoveImagePageState extends State<LoveImagePage>
    with TickerProviderStateMixin {
  final PageController pageController = PageController();
  late TabController tabController;

  @override
  void initState() {
    super.initState();
    tabController = TabController(
      length: 2,
      vsync: this,
    );
  }

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context).colorScheme;
    return Scaffold(
      appBar: AppBar(
        toolbarHeight: 0,
        elevation: 0,
        backgroundColor: theme.primaryContainer,
        surfaceTintColor: theme.primaryContainer,
      ),
      body: Column(
        children: [
          _buildHeader(context),
          Expanded(
              child: PageView(
            controller: pageController,
            onPageChanged: (index) {
              tabController.animateTo(index);
            },
            children: [
              LovePage(axis: 'vertical'),
              LovePage(axis: 'horizontal'),
            ],
          ))
        ],
      ),
    );
  }

  Widget _buildHeader(BuildContext context) {
    final theme = Theme.of(context).colorScheme;
    return Container(
      height: 40,
      padding: EdgeInsets.only(left: 16, right: 16),
      color: theme.primaryContainer,
      child: Row(children: [
        InkWell(
          onTap: () {
            Navigator.pop(context);
          },
          child: Icon(
            Icons.keyboard_backspace,
            color: theme.onSurface,
            size: 26,
          ),
        ),
        Expanded(
          child: TabBar(
            dividerColor: Colors.transparent,
            labelColor: theme.primary,
            unselectedLabelColor: theme.onSurface,
            controller: tabController,
            indicatorPadding: const EdgeInsets.all(2), // 调整指示器的内边距
            indicatorSize: TabBarIndicatorSize.label, // 使用标签的宽度
            tabs: [
              Tab(text: '竖屏 '),
              Tab(text: '横屏'),
            ],
            onTap: (index) {
              pageController.jumpToPage(index);
            },
          ),
        ),
        Image.asset(
          'lib/assets/icon/wallpaper.png',
          width: 26,
        ),
      ]),
    );
  }
}
